import { useRef } from "react";
import { Button } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { QueryPage } from "@components";
import { useFields, GetColumns } from "./config";
import { findRiskModel, addOrEditRiskModel } from "@apis/riskLevelApi";

import { useMainContext } from '@contexts/MainContext'

const RiskLevel = () => {
  const { isButtomShow } = useMainContext()

  const {
    queryFormRef,
    fields,
    modalFormRef,
    modalFields,
    findWeatherType,
    getUnitRisks
  } = useFields()


  const formProps = {
    formRef: queryFormRef,
    fields: fields,
    initialValues: {
      status: '1',
    },
    extraTail: (
      <>
        {isButtomShow('100102') && <Button icon={<PlusOutlined />}
          onClick={() => modalRef.current.showModal()}
        >
          新增
        </Button>}
      </>
    )
  };

  //编辑
  const edit = (row) => {
    modalRef.current.showModal(row);
    modalRef.current.setModalLoading(true)
    setTimeout(() => {
      findWeatherType(modalFormRef)
      getUnitRisks(modalFormRef, row ,modalRef.current.setModalLoading)
    }, 0);
  };

  const tableProps = {
    rowKey: 'riskModelId',
    columns: GetColumns( edit ),
  }

  const modalRef = useRef("modalRef");
  const modalFormProps = {
    formRef: modalFormRef,
    fields: modalFields,
    initialValues: {
      status: '1',
      subjectCountStart: 1,
      policyFeeStart: 0,
      policyAmountStart: 0,
      claimAmountStart: 0,
    }
  };

  return (
    <QueryPage
      formProps={formProps}
      tableProps={tableProps}
      queryApi={findRiskModel}
      modalRef={modalRef}
      modalFormProps={modalFormProps}
      addApi={addOrEditRiskModel}
      updataId="riskModelId"
      updataApi={addOrEditRiskModel}
    />
  );
}

export default RiskLevel